<script setup lang="ts">
import {storeToRefs} from "pinia";
import {useUserStore} from "../stores/user.ts";

defineProps({
  data: {
    type: Array,
    required: true
  },
  size: {
    type: Number,
    default: 25
  },
  height: {
    type: String,
    default: 'calc(100% - 50px) !important'
  },
  itemClick: {
    type: Function,
    required: true
  }
})
let {toUserAccount} = storeToRefs(useUserStore());
</script>

<template>
  <el-scrollbar noresize="noresize" :style="{height: height}">
    <div class="el-aside-two-item" v-for="(user) in data"
         :class="[toUserAccount == user.account? 'active':'']" @click="itemClick(user.account)">
      <el-avatar :size="size+10" shape="square" :src="'/avatar/001.png'"/>
      <div class="el-aside-two-item-right">
        <div class="el-aside-two-item-right-top">
          <div style="font-size: 12px;font-weight: bold;flex: 1">{{ user.account }}</div>
          <div style="font-size: 10px; color: #999999;flex: 1;text-align: right">上午10:00</div>
        </div>
        <span style="font-size: 12px; color: rgb(60, 60, 60);"
              class="text-ellipsis">你好，请问有什么可以帮助您？</span>
      </div>
    </div>
  </el-scrollbar>
</template>
<style scoped>
.el-aside-two-item {
  display: flex;
  flex-direction: row;
  padding: 5px 10px;
  align-items: center;
  cursor: pointer;
}
.el-aside-two-item.active {
  background-color: #cccccc;
}
.el-aside-two-item-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  flex: 1;
}
.el-aside-two-item-right-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.el-aside-two-item-right span {
  font-size: 14px;
}
.text-ellipsis {
  max-width: 160px; /* 设置最大宽度 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
  word-break: break-all; /* 允许在单词内换行 */
}
</style>